<template>
  <div class="Service_Management_3">
    <div class="query">
      <el-input
        style="width: 300px; display: inline-block; margin: 0 10px"
        size="small"
        placeholder="名称查询"
        v-model="query.serverName"
      ></el-input>
      <el-button size="small" icon="el-icon-search" @click="getList"
        >搜索</el-button
      >
      <el-button
        size="small"
        icon="el-icon-plus"
        @click="open(false)"
        type="primary"
        >新增服务</el-button
      >
      <el-button
        size="small"
        @click="exportFile()"
        type="primary"
        >API文档导出</el-button
      >
    </div>
    <div class="body">
      <div
        class="main_box"
        style="margin: 10px; overflow: auto"
        v-loading="isLoading"
      >
        <el-card
          class="box-card card_item"
          v-for="i in listItem"
          :key="i.serverInfo.id"
          style="
            width: 260px;
            height: 170px;
            background-color: #eee;
            border: 1px solid green;
          "
        >
          <p class="del">
            <span @click.stop="del(i.serverInfo.id)" class="todo"
              >&nbsp;x&nbsp;</span
            >
          </p>
          <el-row>
            <el-col :span="4">
              <img src="../../assets/window.png" width="50px" alt="" />
            </el-col>
            <el-col :span="20" @click.native="open(i.serverInfo)">
              <div :title="i.serverInfo.name" class="card_item_name">
                {{ i.serverInfo.name }}({{ i.count }}个)
              </div>
              <div class="card_item_id">
                已请求<span style="color: red">{{ i.requestCount }}</span
                >次
                <!-- <span style="float:right" class="btn_"
                  ><el-button size="mini" @click.stop="toApi(i.serverInfo)"
                    >api管理</el-button
                  ></span
                > -->
              </div>
            </el-col>
          </el-row>
          <div class="_card_row">服务地址：{{ i.serverInfo.address }}</div>
          <div class="_card_row2">
            服务状态：
            <span :class="i.serverInfo.status == 0 ? '_green' : '_red'"></span>
            <span style="margin-left: 5px">{{
              i.serverInfo.status == 0 ? "在线" : "离线"
            }}</span>
            <span style="margin-left: 10px"
              >启用状态：<span
                :style="i.serverInfo.isDisabled ? 'color:red' : 'color:green'"
                >{{ i.serverInfo.isDisabled ? "关" : "开" }}</span
              ></span
            >
          </div>
          <div class="_card_row">
            操作：
            <el-switch
              v-model="!i.serverInfo.isDisabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              style="display: inline-block; margin-right: 20px"
              @change="btn_change($event, i.serverInfo)"
            >
            </el-switch>
            <el-button
              size="mini"
              @click.stop="toApi(i.serverInfo)"
              type="success"
              >api管理</el-button
            >
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1100px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div style="margin: 20px"></div>
      <el-form label-position="left" label-width="120px" :model="addForm">
        <el-form-item label="地址：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.address" size="small">
          </el-input>
        </el-form-item>

        <el-form-item
          label="服务启动多久后注册："
          style="width: 33%; display: inline-block"
        >
          <el-input
            style="width: 200px"
            v-model="addForm.checkAfter"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="健康检查地址："
          style="width: 33%; display: inline-block"
        >
          <el-input
            style="width: 200px"
            v-model="addForm.checkHttp"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="间隔固定的时间访问一次："
          style="width: 33%; display: inline-block"
        >
          <el-input
            style="width: 200px"
            v-model="addForm.checkInterval"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="超时时间："
          style="width: 33%; display: inline-block"
        >
          <el-input
            style="width: 200px"
            v-model="addForm.checkTimeout"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="code：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.codeKey" size="small">
          </el-input>
        </el-form-item>
        <el-form-item
          label="服务描述："
          style="width: 33%; display: inline-block"
        >
          <el-input
            style="width: 200px"
            v-model="addForm.description"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="是否删除："
          style="width: 33%; display: inline-block"
        >
          <el-switch
            v-model="addForm.isDeleted"
            active-color="rgb(64,158,255)"
            inactive-color="#ccc"
          >
          </el-switch>
        </el-form-item>
        <el-form-item
          label="是否禁用："
          style="width: 33%; display: inline-block"
        >
          <el-switch
            v-model="addForm.isDisabled"
            active-color="rgb(64,158,255)"
            inactive-color="#ccc"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="名称：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.name" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="排序：" style="width: 33%; display: inline-block">
          <el-input
            style="width: 200px"
            v-model="addForm.orderIndex"
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="端口：" style="width: 33%; display: inline-block">
          <el-input style="width: 200px" v-model="addForm.port" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="状态：" style="width: 33%; display: inline-block">
          <el-select v-model="addForm.status" placeholder="请选择" size="small">
            <el-option label="正常" :value="0"> </el-option>
            <el-option label="离线" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="类型名："
          style="width: 33%; display: inline-block"
        >
          <el-select
            v-model="addForm.typeName"
            placeholder="请选择"
            size="small"
          >
            <el-option label="临床数据服务类" value="临床数据服务类">
            </el-option>
            <el-option label="管理数据服务类" value="管理数据服务类">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协议：" style="width: 33%; display: inline-block">
          <el-select
            v-model="addForm.protocolType"
            placeholder="请选择"
            size="small"
          >
            <el-option label="HTTPS" value="HTTPS"> </el-option>
            <el-option label="HTTP" value="HTTP"> </el-option>
            <el-option label="WebService" value="WebService"> </el-option>
            <el-option label="RabbitMQ" value="RabbitMQ"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btn_ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      query: {
        serverName: "",
        serverType: "",
        withDisable: true,
      },
      ModeList: [],
      listItem: [],
      isLoading: false,
      dialogVisible: false,
      addForm: {
        isDeleted: false,
        isDisabled: false,
        checkAfter: "",
        checkHttp: "",
        checkInterval: "",
        checkTimeout: "",
        codeKey: "",
        description: "",
        name: "",
        orderIndex: "",
        port: "",
        status: 0,
        typeName: "",
        protocolType: "HTTP",
      },
      title: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getList();
  },
  // 组件方法
  methods: {
    getList() {
      this.$post(
        baseUrl.fwIp + "/T1/api/v1/Platform/CcServer/GetAll",
        this.query
      ).then((res) => {
        console.log(res);
        this.listItem = res.data;
      });
    },
    open(val) {
      console.log(val);
      this.title = "添加";
      if (val) {
        this.addForm = val;
        this.title = val.Name;
      }
      this.dialogVisible = true;
      //   this.$post("/ServiceManage/Create", this.addForm).then((res) => {});
    },
    exportFile(){
      this.$get(
        baseUrl.fwIp + "/T1/api/v1/Platform/CcApi/Export",
        ""
      ).then((res) => {
        if (res.code == 200) {
          this.$message.success("导出成功");
          window.open(baseUrl.fwIp+res.data);
        } else {
          this.$message.error("导出失败：" + res.message);
        }
      });
    },
    handleClose() {
      this.addForm = {
        isDeleted: false,
        isDisabled: false,
        checkAfter: "",
        checkHttp: "",
        checkInterval: "",
        checkTimeout: "",
        codeKey: "",
        description: "",
        name: "",
        orderIndex: "",
        port: "",
        status: 0,
        typeName: "",
        protocolType: "HTTP",
      };
      this.dialogVisible = false;
    },
    btn_ok() {
      console.log(this.addForm);
      if (this.addForm.id) {
        this.$put(
          baseUrl.fwIp + "/T1/api/v1/Platform/CcServer/Update",
          this.addForm
        ).then((res) => {
          this.$message.success("操作成功");
          this.handleClose();
          this.getList();
        });
        return;
      } else {
        this.$post(
          baseUrl.fwIp + "/T1/api/v1/Platform/CcServer/Create",
          this.addForm
        ).then((res) => {
          this.$message.success("操作成功");
          this.handleClose();
          this.getList();
        });
        return;
      }
      // let url = this.addForm.Id
      //   ? "/ServiceManage/Update"
      //   : "/ServiceManage/Create";
      // this.$post(url, this.addForm).then((res) => {
      //   if (res.code == -1) {
      //     this.$message.error(res.msg);
      //     return;
      //   }
      //   this.$message.success("操作成功");
      //   this.handleClose();
      //   this.getList();
      // });
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$deleteF(
            baseUrl.fwIp + "/T1/api/v1/Platform/CcServer/Delete?id=" + id
          ).then((res) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },
    toApi(val) {
      console.log(val);
      const Api_id = val.id;
      this.$router.push("/SystemManagement/Service_Management_4?id=" + Api_id);
    },
    btn_change(val, item) {
      this.addForm = item;
      this.addForm.isDisabled = !val;
      this.btn_ok();
    },
  },
};
</script>

<style scoped lang="scss">
.Service_Management_3 {
  padding: 10px;
  .card_item {
    display: inline-block;
    margin: 5px;
  }
  .main_box {
    text-align: none;
    border: 1px solid #ccc;
    height: 800px;
    overflow: auto;
  }
  .card_item_name {
    padding: 0 5px 0 20px;
    // text-align: center;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card_item_id {
    padding: 0 10px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .del {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
    text-align: right;
    margin-top: -40px;
    top: 20px;
    right: -15px;
    font-size: 26px;
    font-weight: 700;
    .todo {
      cursor: pointer;
    }
  }
  .card_item:hover .del {
    display: block;
  }

  .btn_ {
    display: none;
    .todo {
      cursor: pointer;
    }
  }
  .card_item:hover .btn_ {
    display: block;
  }
}
._red {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
  box-shadow: 0 0 4px red;
}
._green {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(18, 240, 37);
  box-shadow: 0 0 4px rgb(146, 255, 51);
}
._card_row {
  padding: 0 5px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  line-height: 30px;
  border-radius: 5px;
}
._card_row2 {
  padding: 0 5px;
  height: 30px;
  background-color: #eee;
  line-height: 30px;
}
</style>
